<template>
  <common-page v-model="height">
    <template v-slot:header>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr1" placeholder="废气" style="width:120px;">
          <el-option
            v-for="item in list1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr2" placeholder="烟尘" style="width:120px;">
          <el-option
            v-for="item in list2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-date-picker
          v-model="queryObj.attr3"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width:240px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        />
      </div>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr4" placeholder="行业" style="width:120px;">
          <el-option
            v-for="item in list4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="common-form-control">
        <el-select v-model="queryObj.attr5" placeholder="化工" style="width:120px;">
          <el-option
            v-for="item in list5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </template>
    <div class="purple-panel">
      <div class="card-purple left">
        <el-card
          class="box-card"
          shadow="never"
          style="border:none;"
          :style="{height:tableHeight+'px'}"
        >
          <el-table
            class="table-larger"
            :data="data"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="项目名称"
              align="center"
            />
            <el-table-column
              prop="value"
              label="排放量"
              align="center"
            />
          </el-table>
        </el-card>
      </div>
      <div class="card-purple right">
        <card-panel title="排放量统计" :style="{height:tableHeight-26+'px'}">
          <div class="pie-larger">
            <v-chart autoresize :options="options" style="width:100%;height:100%;" />
          </div>
          <div class="chart-legend-list">
            <div
              v-for="(item,index) in list"
              :key="`legend-list-${index}`"
              class="chart-legend-list-line"
            >
              <i class="icon-circel" :style="{backgroundColor:options.color[index]}" />
              <div class="legend-name">{{ item.name }}</div>
              <div class="legend-line" />
              <div class="legend-value">{{ item.percent }}%</div>
            </div>
          </div>
        </card-panel>
      </div>
    </div>
  </common-page>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import { graphic } from 'echarts/lib/export'

import CommonPage from '@/components/CommonPage/index.vue'
import { Decimal } from 'decimal.js'

export default {
  name: 'TongbiChaxun',
  components: {
    CommonPage
  },
  data() {
    return {
      height: 600,
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      queryObj: {
        attr1: '',
        attr2: '',
        attr3: '',
        attr4: '',
        attr5: ''
      },
      data: [
        { value: 1548, name: '污水处理厂', percent: '' },
        { value: 535, name: '造纸', percent: '' },
        { value: 510, name: '焦化', percent: '' },
        { value: 634, name: '食品制造', percent: '' },
        { value: 735, name: '煤炭', percent: '' },
        { value: 735, name: '机械制造', percent: '' },
        { value: 735, name: '电力', percent: '' }
      ]
    }
  },
  computed: {
    tableHeight() {
      return this.height - 30
    },
    list() {
      const data = this.data
      let total = 0
      data.forEach(item => {
        total += item.value
      })
      data.forEach(item => {
        item.percent = new Decimal(item.value / total * 100).toFixed(2)
      })
      return data
    },
    options() {
      const data = this.data
      const legend = data.map((item) => {
        return item.name
      })
      return {
        color: [
          '#3d84ff',
          '#2fc8a1',
          '#ffd600',
          '#dc6b6b',
          '#7ed321',
          '#f5a623',
          '#b8e986',
          '#182a5e',
        ],
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: false,
          data: legend
        },
        series: [
          {
            name: '烟尘行业占比统计',
            type: 'pie',
            radius: '100%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss">
@import "@/assets/style/global.scss";

.table-larger {
  td, th {
    padding: 10px 0;
  }
}

.purple-panel {
  @include clearfix;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.card-purple {
  @include clearfix;

  width: 100%;

  &.left {
    width: 364px;
  }

  &.right {
    flex: 1;
    margin: 0 0 0 10px;
    overflow: hidden;
  }

  .pie-larger {
    width: 276px;
    height: 276px;
    margin: 0 0 0 2%;
    float: left;

    .chart-pie {
      display: inline-block;
      vertical-align: top;
      width: 192px;
      height: 192px;
      float: left;
      margin: 10% 0 0 0;
    }
  }

  .chart-legend-list {
    min-width: 450px;
    display: block;
    vertical-align: top;
    margin: 5% 0 0 376px;
    color: #313748;
    padding: 2% 0 0 0;

    .chart-legend-list-line {
      line-height: 22px;
      margin: 0 0 10px 0;
      font-size: 13px;
      overflow: hidden;

      .icon-circel {
        border-radius: 100%;
        background: #3d84ff;
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 16px 0 0;
      }

      .legend-name {
        width: 70px;
        display: inline-block;
        vertical-align: top;
      }

      .legend-line {
        display: inline-block;
        vertical-align: middle;
        border: 1px dashed #e9ecf1;
        width: 60%;
        margin: 0 10px;
      }

      .legend-value {
        display: inline-block;
        vertical-align: top;
      }
    }

  }
}

</style>
